<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../Vue/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>axios基本使用</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
</body>
<script>
    /*
    接口1:随机笑话
    请求地址:https://autumnfish.cn/api/joke/list
    请求方法:get
    请求参数:num(笑话条数,数字)
    响应内容:随机笑话
    */
   document.querySelector(".get").onclick=function(){
    axios.get("https://autumnfish.cn/api/joke/list")
    // 请求成功后执行的回调函数
    .then(function(response){
        console.log(response);
        // 请求失败后执行的回调函数
    },function(err){
        console.log(err);
    })
   }

   /*
    接口2:用户注册
    请求地址:https://autumnfish.cn/api/user/reg
    请求参数:username(用户名,字符串)
    响应内容:注册成功或失败
   */
  document.querySelector(".post").onclick=function(){
    axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰"})
    .then(function(response){
        console.log(response);
        console.log(this.skill);
    },function(err){
        console.log(err);
    })
  }
</script>
</html>